<template>
  <div class="app-container add">
    <CommonHeader title="关联单据" :isShowBack="true" :tem="false">
      <template>
        <span>
          <img
            src="@/assets/images/common/back.png"
            class="back-img"
            @click="goBack"
          />
        </span>
      </template>
    </CommonHeader>
    <section class="search-box">
      <div class="inner">
        <van-search
          v-if="this.$route.query.relateType == 'purchaseReceipt'"
          v-model="searchParams.receiptCode"
          placeholder="查询"
          @search="onSearch"
          @cancel="onCancel"
          readonly
          @click="showSearch"
          @click-right-icon.stop="cancel"
        >
          <template #right-icon>
            <van-icon name="cross" />
          </template>
        </van-search>
        <van-search
          v-else
          v-model="searchParams.purchaseCode"
          placeholder="查询"
          @search="onSearch"
          @cancel="onCancel"
          readonly
          @click="showSearch"
          @click-right-icon.stop="cancel"
        >
          <template #right-icon>
            <van-icon name="cross" />
          </template>
        </van-search>
        <div v-show="searchFlag" class="searchInfo">
          <van-form v-model="searchParams" class="vantForm">
            <van-cell-group inset>
              <div class="selTest">
                <label class="labelLeft">单号</label>
                <el-input
                  v-if="this.$route.query.relateType == 'purchaseReceipt'"
                  v-model="searchParams.receiptCode"
                  clearable
                  placeholder="请输入"
                />
                <el-input
                  v-else
                  v-model="searchParams.purchaseCode"
                  clearable
                  placeholder="请输入"
                />
              </div>
            </van-cell-group>
            <div class="btnOk">
              <van-button round block reset @click="cancel"> 重置 </van-button>
              <van-button round block type="primary" @click="onSubmit">
                确定
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </section>
    <CommonMain>
      <template>
        <van-pull-refresh
          v-model="refreshing"
          :disabled="isRefreshDisable"
          @refresh="onRefresh"
        >
          <van-list
            v-if="list.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <ref-type :list="list" @chose="chose">
              <template slot="label"> </template>
            </ref-type>
          </van-list>
        </van-pull-refresh>
      </template>
    </CommonMain>
    <div class="model-footer-wrap">
      <van-button
        type="primary"
        block
        round
        color="#548af1"
        size="normal"
        :loading="btnLoading"
        loading-text="正在提交..."
        @click="submitAdd()"
        >确认</van-button
      >
    </div>
    <!-- 加载弹窗 -->
    <img src="@/assets/images/allocation/scan.png"  class="scan-img" @click="scanChange"/>
  </div>
</template>
<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonMain from "@/components/CommonMain/index.vue";
import refType from "./components/refType.vue";
import { workordersSimple, productOrdersList } from "@/api/inventory";

export default {
  data() {
    return {
      searchParams: {
        current: 1,
        size: 10,
        // receiptCode: "",
      },
      searchFlag: false,
      search: "",
      list: [],
      isRefreshDisable: false,
      refreshing: false,
      loading: false,
      finished: false,
      btnLoading: false,
      choseData: {},
    };
  },
  components: {
    CommonHeader,
    CommonMain,
    refType,
  },
  props: {},
  created() {
    this.init();
  },
  mounted () {
    const that = this
    // PDA扫码
    window['QrcodeMsg'] = res => {
      if (res) {
        console.log(res, 'ScanCodeMsg这是首页')
        if(this.$route.query.relateType == "purchaseReceipt") {
          this.searchParams.receiptCode = res
          this.getProductOrdersList()
        } else {
          this.searchParams.purchaseCode = res
          this.getWorkordersSimple()
        }
      }
    }
    // 扫码枪扫码
    window['ScanCodeMsg'] = res => {
      if (res) {
        console.log(res,'ScanCodeMsg这是首页')
        if(this.$route.query.relateType == "purchaseReceipt") {
          this.searchParams.receiptCode = res
          this.getProductOrdersList()
        } else {
          this.searchParams.purchaseCode = res
          this.getWorkordersSimple()
        }
      }
    }
  },
  methods: {
    // 手动拉起相机
    scanChange(){
      const that = this
      if(process.env.NODE_ENV === 'development'){
        if(this.$route.query.relateType == "purchaseReceipt") {
          this.searchParams.receiptCode = 'PO20230611002'
          this.getProductOrdersList()
        } else {
          this.searchParams.purchaseCode = 'PO20230611002'
          this.getWorkordersSimple()
        }
      }else{
        window.flutter_inappwebview.callHandler("qrCode").then((res) => {
          if (res) {
            console.log(res, "qrCode");
            if(this.$route.query.relateType == "purchaseReceipt") {
              this.searchParams.receiptCode = res
              this.getProductOrdersList()
            } else {
              this.searchParams.purchaseCode = res
              this.getWorkordersSimple()
            }
          }
        });
      }

    },
    goBack(){
      const routerConfig = this.$store.state.routerQuery.config
      const currentRouterName = this.$route.name
      this.$router.push({
        name:routerConfig.get(currentRouterName),
        query:this.$store.state.routerQuery.routerQuery[routerConfig.get(currentRouterName)]
      })
    },
    init() {
      if (this.$route.query.relateType == "purchaseReceipt") {
        this.getProductOrdersList();
      } else {
        this.getWorkordersSimple();
      }
    },
    chose(data) {
      this.choseData = data;
    },
    async getProductOrdersList() {
      this.loading = true;
      this.refreshing = true;

      const result = await productOrdersList({
        ...this.searchParams,
        receiptCode: this.searchParams.receiptCode,
        states: '2,3'
      });
      this.refreshing = false;
      this.loading = false;
      const { code, data, message } = result.data || {};
      if (data.records.length > 0) {
        data.records.map((i) => {
          i.label = i.receiptCode;
          i.text = i.createByNickName;
          i.label1 = i.createTime;
          i.isChose = false;
        });
      }

      if (this.searchParams.current > 1) {
        this.list = this.list.concat(data.records);
      } else {
        this.list = data.records;
      }

      if (
        this.total <= this.list.length ||
        data.records.length == 0 ||
        data.records.length < this.searchParams.size
      ) {
        this.finished = true;
      }
    },
    async getWorkordersSimple(orderNo) {
      this.loading = true;
      this.refreshing = true;
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const result = await workordersSimple({
        ...this.searchParams,
        purchaseCode: this.searchParams.purchaseCode,
        state: '2,3'
      });
      this.refreshing = false;
      this.loading = false;
      loading.close();
      const { code, data, message } = result.data || {};
      if (data.records.length > 0) {
        data.records.map((i) => {
          i.label = i.purchaseCode;
          i.text = i.createByNickname;
          i.label1 = i.createTime;
        });
      }
      if (this.searchParams.current > 1) {
        this.list = this.list.concat(data.records);
      } else {
        this.list = data.records;
      }
      if (
        this.total <= this.list.length ||
        data.records.length == 0 ||
        data.records.length < this.searchParams.size
      ) {
        this.finished = true;
      }
    },
    onLoad() {
      if (this.finished) {
        return;
      }
      console.log("滚到了底部");
      this.searchParams.current += 1;
      this.init();
    },
    onRefresh() {
      console.log("滚到了底部1123");
      this.finished = false;
      this.data = [];
      this.searchParams.current = 1;
      this.init();
    },
    // 弹出搜索框
    showSearch() {
      this.searchFlag = !this.searchFlag;
    },
    onSearch() {},
    onCancel() {
      this.searchFlag = false;
    },
    onSubmit() {
      this.searchFlag = false;
      this.onRefresh();
    },
    cancel() {
      this.searchParams = {
        current: 1,
        size: 10,
      };
      this.searchFlag = false
      this.onRefresh();
    },
    submitAdd() {
      this.$store.commit("routerQuery/SET_REFORDERNO", this.choseData);
      this.$router.push({
        path: "/allocation/add",
        query: {
          relateType: this.$route.query.relateType,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.scan-img{
  position: fixed;
  bottom: 1vh;
  right: 0;
  // transform: translateX(-50%);
  width: 82px;
  height: 82px;
  z-index: 2;
}
.search-box {
  // height: 46px;
  position: relative;
  .inner {
    font-size: 16px;
    color: #fff;
    padding: 8px 12px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .van-search {
    flex: 1;
    padding: 0px 15px 0 3px;
    // height: 32px;
    border-radius: 4px;
    border: 1px #dedede solid;
  }
  .van-search__content {
    background-color: #ffffff;
    height: 32px;
    .van-cell {
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
  .btn-wrap {
    width: 62px;
    height: 32px;
    background: #548af1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    font-size: 14px;
    color: #fff;
  }
  .scan-box {
    display: flex;
    align-items: center;
    img {
      width: 20px;
    }
  }
}
.app-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .van-pull-refresh {
    height: 100%;
    overflow: scroll;
    /deep/ .van-pull-refresh__track {
      // overflow: scroll;
    }
    .van-list {
      height: 100%;
      // overflow: scroll;
    }
    .no-data {
      height: 100%;
      font-size: 14px;
      display: flex;
      justify-content: center;
      color: #c7c6c6;
      padding-top: 30px;
    }
  }
}

.searchInfo {
  position: absolute;
  top: calc(46px + 4px);
  left: 0;
  z-index: 33;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  .vantForm {
    // padding: 0 15px;
    font-size: 13px;

    ::v-deep .van-field {
      line-height: 14px;
    }
    ::v-deep .van-field__label {
      color: #333333;
    }

    ::v-deep .van-button--primary {
      background: #007cff;
      border: 1px solid #007cff;
    }

    ::v-deep .van-field__control {
      text-align: right;
    }

    ::v-deep .van-button--block {
      height: 30px;
      font-size: 13px;
    }

    .btnOk {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      height: 30px;

      ::v-deep .van-button--round {
        width: 118px;
        border-radius: 4px;
      }

      ::v-deep .van-button--default {
        margin-right: 10px;
        border-color: #c9c9c9;
      }
    }

    .selTest {
      display: flex;
      justify-content: space-between;
      height: 36px;
      box-sizing: border-box;
      border-bottom: 1px solid #f6f6f6;

      label {
        display: inline-block;
        width: 150px;
        text-align: center;
        font-size: 14px;
        line-height: 36px;
        color: #323232;
      }

      .labelLeft {
        text-align: left;
        padding-left: 16px;
      }

      .el-input {
        flex: 1 0 auto;
        width: 0;
      }

      ::v-deep .el-input__inner {
        height: 36px;
        line-height: 36px;
        border: none;
        border-bottom: 1px solid #f6f6f6;
        text-align: right;
      }

      ::v-deep .el-input__inner::placeholder {
        text-align: right;
      }

      ::v-deep .el-select .el-input__inner {
        text-align: right;
      }

      ::v-deep .el-select__input {
        text-align: right;
      }
    }
  }
}
</style>